<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>i 职推——面向职教的一站式就业匹配与职能提升平台</title>
     <link rel="stylesheet" href="{% static 'css/commom.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="{% static 'js/animate.min.css' %}" />
    <script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<style>@font-face {
    font-family: 'icomoon';
    src:  url('{% static "fonts/icomoon.eot?e5afxt" %}');
    src:  url('{% static "fonts/icomoon.eot?e5afxt" %}');
    src:  url('{% static "fonts/icomoon.eot?e5afxt" %}') format('embedded-opentype');
    src:  url('{% static "fonts/icomoon.eot?e5afxt#iefix" %}') format('embedded-opentype'),
      url('{% static "fonts/icomoon.ttf?e5afxt" %}') format('truetype'),

      url('{% static "fonts/icomoon.woff?e5afxt" %}') format('woff'),

      url('{% static "fonts/icomoon.svg?e5afxt#icomoon" %}') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }</style>
<body style="overflow-x: hidden;">
    <!--导航栏-->
    <div id="headCon "
        class="clearfix:after clearfix wow slideInLeft animate__animated animate__slideInLeft " data-wow-duration="2s"
    data-wow-delay="5s">
        <div class="w">
            <div class="logo">

                <image src="{% static 'image/u9.png' %}"></image>
            </div>
            <div class="Nav">
                <a href="http://175.178.101.10/" class="link">首页</a>
		 <a href="http://175.178.101.10/static/ss/zhi.html" class="link">人才推荐</a>

                 <a href="http://175.178.101.10/static/ss/course.html" class="link" id="link1">精品课程</a>
                <a href="" class="link" id="link2">创新技术</a>
                <a href="" class="link" id="link3">产品定价</a>
                <a href="" class="link" id="link4">关于我们</a>
               <script>

      $('#link2').click(function (event) {
          event.preventDefault(); // 阻止链接的默认行为（即跳转）
       document.getElementById('ll1').scrollIntoView();

    });
       $('#link3').click(function (event) {
          event.preventDefault(); // 阻止链接的默认行为（即跳转）
       document.getElementById('ll2').scrollIntoView();

    });
        $('#link4').click(function (event) {
          event.preventDefault(); // 阻止链接的默认行为（即跳转）
       document.getElementById('ll3').scrollIntoView();

    });

            </script>
               
                {% if request.user.is_authenticated %}
                    <a href="{% url 'users:userinfo' %}"><button class="btn" onclick="location.href=''">
                        {{ request.user.username|slice:":5" }}
                    </button></a>


                {% else %}
                    <a href="{% url 'users:login' %}">


                    <button class="btn" onclick="location.href='{% url 'users:login' %}'">登录 </button>

                    </a>

                {% endif %}

            </div>
        </div>
    </div>

    <!--首页主页-->
    <div class="w animate__animated animate__slideInLeft">
        <div class="main">
            <div class="mainLeft">
                <image src="{% static 'image/u10.png' %}"></image>
            </div>
            <div class="mainRight">
                <div class="mainRight_row1">
                    <image src="{% static 'image/u1.png' %}"></image>
                </div>
                <div class="mainRight_row2">

                    <image src="{% static 'image/u7.png' %}"></image>

                    <image src="{% static 'image/j8.png' %}" style="margin-top:30px;"></image>
                </div>
                <div class="mainRight_row3"> <button class="btn4" onclick="window.location.href='{% url 'contents:careerhub' %}'">生成职业画像</button></div>
            </div>
        </div>
    </div>

    <!--介绍功能部分-->
    <div class="introduction animate__animated animate__slideInRight">
        <div class="w">

            <h5 class="purple" style="font-size: 16px; margin-bottom: 25px;"></h5>
            <h3 style="font-size: 50px; margin-bottom: 25px;" id="ll1">使用<span class="purple">「职途」</span>可以获得什么?</h3>
            <span style="font-size: 18px; margin-bottom: 25px; color:RGB(124, 139, 161)">为职业生涯打造个性化解决方案</span>
            <div class="intro_main">
                <li>
                    <div class="circle">
{#                        <image src="./image/k1.svg"></image>#}
                        <image src="{% static 'image/k1.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">AI 职业规划 (AI Career
                            Planning)</h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用机器学习算法分析用户的职业历史、技能和兴趣等信息，生成个性化的职业画像，提供符合用户需求和潜力的职业发展建议，帮助用户做出更明智的职业决策。</p>
                    </div>
                </li>
                <li>
                    <div class="circle">
{#                        <image src="./image/k2.svg"></image>#}
                        <image src="{% static 'image/k2.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">AI 求职辅导 (AI Job Coaching)
                        </h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用机器学习算法分析用户的简历和求职历史，为用户提供符合其需求和潜力的求职建议和技巧，并根据用户的反馈和求职情况提供个性化的求职支持和指导。</p>
                    </div>
                </li>
                <li>
                    <div class="circle">
{#                        <image src="./image/k3.svg"></image>#}
                        <image src="{% static 'image/k3.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">职业学习平台 (Career Learning
                            Hub)</h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用职业画像分析用户的职业特征和潜力，推荐符合用户需求和兴趣的在线课程和培训资源，同时利用机器学习算法不断优化推荐结果，并根据用户的反馈和学习情况提供个性化的学习建议和支持。</p>
                    </div>
                </li>
                <li>
                    <div class="circle">
{#                        <image src="./image/k4.svg"></image>#}
                        <image src="{% static 'image/k4.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">职业社交网络 (Career Social
                            Network)</h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用职业画像分析用户的职业关系和社交活动，推荐符合用户需求和兴趣的职业导师和合作伙伴，同时提供职业交流和资源分享的平台，帮助用户建立有益的职业关系和合作伙伴</p>
                    </div>
                </li>
                <li>
                    <div class="circle">
{#                        <image src="./image/k5.svg"></image>#}
                        <image src="{% static 'image/k5.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">职业画像分析 (Career Profile
                            Analysis)</h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用职业画像分析用户的职业历史、技能和兴趣等数据，生成个性化的职业画像，帮助用户了解自己的职业特征和潜力，提供更个性化的职业发展建议和支持，并为平台提供更精准和有效的数据分析和预测
                        </p>
                    </div>
                </li>
                <li>
                    <div class="circle">
{#                        <image src="./image/k6.svg"></image>#}
                        <image src="{% static 'image/k6.svg' %}"></image>
                    </div>
                    <div class="intro_content">
                        <h3 style="font-size: 25px;color:RGB(36, 62, 99);margin-bottom: 5px;">智能职位匹配 (Intelligent Job
                            Matching)</h3>
                        <p style="text-align: left; font-size: 15px;color: RGB(124, 139, 161);line-height: 30px;">
                            利用职业画像分析用户的职业特征和潜力，为用户提供符合其需求和兴趣的职位匹配和推荐，同时利用机器学习算法不断优化匹配算法和结果，提高匹配的准确性和效率。</p>
                    </div>
                </li>
            </div>
        </div>
    </div>

    <div class="achievement animate__animated animate__slideInLeft">
        <div class="w">
            <div class="image4"></div>
            <div class="achieve_main">
                <h4 style="font-size: 18px;color: RGB(100, 21, 255);margin-bottom: 15px;margin-top: 30px;">我们的成绩</h4>
                <h1 style="font-size: 50px;color: RGB(36, 62, 99);margin-bottom: 15px;">我们一经推出就 <span
                        style="color:RGB(104, 27, 255)">屡受好评.</span></h1>
                <p style="font-size: 19px;color:RGB(124, 139, 161)">我们很自豪地向您展示职途
                    平台受欢迎的程度。用户使用我们的平台进行职业规划和学习，以及职业社交等方面的需求日益增长。我们的数据展示将向您呈现用户使用量及服务次数的增长趋势，以及生成职业画像次数的增加情况。这些数据不仅证明了我们平台的受欢迎程度，同时也反映了用户对于我们平台的信任和满意度。
                </p>
                <div>
                    <li>
                        <h4>17560+</h4><span>注册用户</span>
                    </li>
                    <li>
                        <h4>36470+</h4><span>生成职业画像次数
                        </span>
                    </li>
                    <li>
                        <h4>58230+</h4><span>AI资讯服务次数
                        </span>
                    </li>
                    <li>
                        <h4>70+</h4><span>精品课程数量</span>
                    </li>
                </div>
                <button class="btn1">了解更多</button>
            </div>

        </div>
    </div>
    <div class="useStep animate__animated animate__slideInRight">
        <div class="w">
            <div class="image5"></div>
            <div class="useStep_main">
                <h4 style="font-size: 18px;color: RGB(100, 21, 255);margin-bottom: 15px;">探索您的职业未来</h4>
                <h1 style="font-size: 50px;color: RGB(36, 62, 99);margin-bottom: 15px;">与<span
                        style="color:RGB(104, 27, 255)">「职途」</span>一起开启您的职业之旅！</h1>
                <div class="useStep_list">
                    <li>
                        <div class="number">01</div>
                        <div class="useStep_content">
                            <h1 style="color:RGB(36, 62, 99);font-size: 20px;margin-bottom: 10px;">登录并上传个人简历</h1>
                            <p style="line-height: 25px;color:RGB(113, 128, 150)">用户在职途
                                平台注册账号并登录后，可以填<br>写个人资料和上传个人简历PDF文件，以便平台了<br>解用户的教育背景、工作经历、技能和成就等信<br>息，为用户提供更个性化的职业服务。
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="number">02</div>
                        <div class="useStep_content">
                            <h1 style="color:RGB(36, 62, 99);font-size: 20px;margin-bottom: 10px;">连接互联网平台并获取数据（可选）</h1>
                            <p style="line-height: 25px;color:RGB(113, 128, 150)">
                                用户可以连接各大互联网平台（如LinkedIn、<br>Indeed等）获取个人数据，以便平台从多个数据源<br>分析用户的职业历史、技能和兴趣等信息，并生成<br>个性化的职业画像。
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="number">03</div>
                        <div class="useStep_content">
                            <h1 style="color:RGB(36, 62, 99);font-size: 20px;margin-bottom: 10px;">生成专属职业画像</h1>
                            <p style="line-height: 25px;color:RGB(113, 128, 150)">
                                平台利用机器学习算法分析用户的职业历史、技能<br>和兴趣等信息，生成个性化的职业画像，帮助用户<br>了解自己的职业特征和潜力，并为用户提供符合其<br>需求和兴趣的职业发展建议和支持。
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="number">04</div>
                        <div class="useStep_content">
                            <h1 style="color:RGB(36, 62, 99);font-size: 20px;margin-bottom: 10px;">获得AI职业规划服务</h1>
                            <p style="line-height: 25px;color:RGB(113, 128, 150)">
                                基于用户的职业画像和职业规划目标，平台为用户<br>提供个性化的AI职业规划服务，帮助用户制定职业<br>规划方案、解决职业发展中的问题和挑战，以及发<br>现更多的职业机会。
                            </p>
                        </div>
                    </li>
                </div>
            </div>
        </div>
    </div>
    <div class="advantage animate__animated animate__slideInLeft">
        <div class="w">
            <div class="adv_main">
                <h4 style="font-size: 18px;color: RGB(100, 21, 255);margin-bottom: 15px;"></h4>
                <h1 style="font-size: 50px;color: RGB(36, 62, 99);margin-bottom: 15px;"><span
                        style="color:RGB(104, 27, 255)">「职途」</span>的优势</h1>
                <p style="font-size: 19px;color:RGB(124, 139, 161)">i 职推
                    平台利用先进的人工智能和机器学习算法，为用户提供个性化的职业指导和求职推荐，帮助用户实现职业发展的最大潜力</p>
                <div class="adv_list">
                    <li>
{#                        <image src="./image/u3.png"></image>#}
                        <image src="{% static 'image/u3.png' %}"></image>
                        <h2 style="margin-top: 5px; margin-left: 8px;">多数据源职业画像</h2>
                        <p style="font-size: 14px;">
                            平台结合多个数据源，包括社交媒<br>体、职业网络和招聘网站等，采集和<br>分析职业相关数据，从而提供更加准<br>确和全面的职业发展指导和求职推<br>荐。</p>
                    </li>
                    <li>

                        <image src="{% static 'image/u4.png' %}"></image>
                        <h2 style="margin-top: 5px; margin-left: 8px;">高校精品课程整合</h2>
                        <p style="font-size: 14px;">
                            所高校合作，将其优秀的课程整合到平<br>台中，涵盖技能培训、职业知识、创新<br>创业和行业趋势等多个方面，为用户提<br>供更加专业和可靠的职业发展支持。</p>
                    </li>
                </div>
                <button class="btn5">了解更多优势</button>
            </div>
            <div class="adv_image"></div>
        </div>
    </div>
    <div class="scheme animate__animated animate__slideInRight">
        <div class="w">
            <div class="scheme_content">
                <h4 style="font-size: 18px;color: RGB(100, 21, 255);margin-bottom: 15px;"id="ll2">价格亲民</h4>
                <h1 style="font-size: 50px;color: ;margin-bottom: 15px;"><span
                        style="color:black">合理灵活</span>的定价方案</h1>
                <p style="font-size: 19px;color:black">
                    我们的定价方案基于对客户需求的深入了解和分析，结合平台的各项功能<br>和服务，提供了两个定价方案，主要面向高校和企业</p>
            </div>
            <div class="scheme_list">

                <li>
                    <div class="list_top">
                        <h2 style="font-size: 20px;color:RGB(26, 32, 44);margin-bottom: 30px;" class="profession">高校版
                        </h2>
                        <div class="scheme_price">
                            <h1 style="font-size:30px;color:RGB(26, 32, 44)">¥79999/每年 </h1><span
                                style="font-size: 20px;color:RGB(160, 174, 192 );text-align: right;line-height: 40px;text-decoration: line-through;">¥90080</span>
                        </div>
                        <h3 style="font-size:16px; font-weight: normal;color:RGB(74, 85, 104)">适合高校学生</h3>
                    </div>
                    <div class="list_bottom">

                        <h3>丰富的招聘信息</h3>
                        <h3>智能岗位匹配</h3>
                        <h3>简历分析</h3>
                        <h3>多样课程赋能</h3>

                    </div><button class="btn6" style="  margin-top: 95px;">开始订阅</button>
                </li>
                <li>
                    <div class="list_top">
                        <h2 style="font-size: 20px;color:RGB(26, 32, 44);margin-bottom: 30px;">企业版</h2>
                        <div class="scheme_price">



                            <h1 style="font-size:30px;color:RGB(26, 32, 44)">¥9999/每年 </h1><span
                                style="font-size: 20px;color:RGB(160, 174, 192 );text-align: right;line-height: 40px;text-decoration: line-through;">¥15000</span>
                        </div>
                        <h3 style="font-size:16px; font-weight: normal;color:RGB(74, 85, 104)">适合中小型企业和初创企业</h3>
                    </div>
                    <div class="list_bottom">
                        <h3> 高质量人才市场</h3>
                        <h3>高效的人才匹配</h3>
                        <h3>专属的人才招聘服务</h3>
                        <h3>职业社交网络</h3>
                    </div>
                    <button class="btn6" style="  margin-top: 95px;">开始订阅</button>

                </li>
            </div>
        </div>
    </div>


    <div class="evaluation animate__animated animate__slideInLeft">
        <div class="w">
            <h1 style="font-size: 40px;color: RGB(36, 62, 99);">好评如潮</h1>
            <div id="image-container">
{#                <img src="./image/m1.png" alt="Image 1">#}
                <img src="{% static 'image/m1.png' %}" alt="Image 1">
                <img src="{% static 'image/m2.png' %}" alt="Image 2">
                <img src="{% static 'image/m3.png' %}" alt="Image 3">
                <img src="{% static 'image/m4.png' %}" alt="Image 4">

                <img src="{% static 'image/m7.png' %}" alt="Image 7">
                <img src="{% static 'image/m8.png' %}" alt="Image 8">
                <img src="{% static 'image/m9.png' %}" alt="Image 9">
                <img src="{% static 'image/m10.png' %}" alt="Image 10">
                <img src="{% static 'image/m11.png' %}" alt="Image 11">

                      <style>
.button {
        font-size: 24px;
        cursor: pointer;
        background-color: #c8b1ef; /* 设置按钮的背景颜色 */
        border: 2px solid #4ba7e5; /* 设置按钮的边框 */
        border-radius: 50%;
        width: 60px; /* 设置按钮的宽度 */
        height: 60px; /* 设置按钮的高度 */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    }

    .button:hover {
        background-color: #b987ee; /* 鼠标悬停时的背景颜色 */
        border-color: #e185e5; /* 鼠标悬停时的边框颜色 */
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7); /* 鼠标悬停时的阴影效果 */
    }
                </style>
                <button id="prev-button" class="button"><span class="button-text">&lt;</span></button>
                <button id="next-button" class="button"><span class="button-text">&gt;</span></button>
            </div>

        </div>
    </div>
    <div class="question animate__animated animate__slideInRight">
        <div class="w">
            <div class="ques_content">
                <h4 style="font-size: 17px; color:RGB(100, 21, 255);margin-bottom: 30px;">FAQS</h4>
                <h1 style="font-size: 50px; color:RGB(100, 21, 255);margin-bottom: 30px;"id="ll3">常见问题</h1>
                <p style="font-size: 20px; color:RGB(124, 139, 161);margin-bottom: 30px;">
                    提供了针对平台使用和职业发展的常见问题和解答，涵盖了平台功能、数<br>据隐私、职业发展等多个方面的问题，可以帮助用户快速解决遇到的问<br>题，提高使用体验。</p>
            </div>

            <div class="ques_box">
                <div class="question-box">
                    <div class="box-header">如何使用 职途 平台？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;"> 使用 职途
                            平台非常简单。用户只需要在平台上注册账号，并填写相关的职业信息和兴趣，即可开始使用平台<br>提供的职业建议和求职推荐等服务。平台还提供了简单易懂的用户指南和视频教程，帮助用户更好地了解和使用平<br>台。
                        </p>

                    </div>
                </div>

                <div class="question-box">
                    <div class="box-header"  >是否需要付费使用  职途  平台？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;">i 职推
                            平台提供免费和付费的服务，用户可以根据自己的需求选择适合的服务。免费的服务包括基本的职业建<br>议和求职推荐，而付费的服务则提供更加个性化和专业的职业指导和培训。具体来说，平台的付费服务包括个人职业<br>咨询、行业分析报告、职业培训课程等。
                        </p>
                    </div>
                </div>
                <div class="question-box">
                    <div class="box-header" >i 职推 平台如何保护我的数据隐私？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;">i 职推
                            平台非常重视用户的数据隐私，采取了多种措施来保护用户的数据安全。首先，平台只收集用户必要的个人信息，如职业背景和职业兴趣等，以保证用户的隐私安全。其次，平台采用了先进的数据加密和安全措施，保障用户数据的安全性。最后，平台不会将用户的数据分享给任何第三方机构，保证用户数据的机密性。
                        </p>
                    </div>
                </div>
                <div class="question-box">
                    <div class="box-header"  >如何获得更好的职业建议和推荐？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;">
                            为了获得更好的职业建议和推荐，用户可以在平台上提供更多的个人信息和职业经验，例如教育背景、工作经历、技能等。此外，用户还可以在平台上参加相关的职业测试和调查，获取更加准确的职业建议和推荐。
                        </p>
                    </div>
                </div>
                <div class="question-box">
                    <div class="box-header"  >如何发现新的职业机会？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;">i 职推
                            平台可以帮助用户发现新的职业机会。用户可以通过平台上的职业分析和行业趋势分析了解不同职业领域和行业的发展趋势和机会，为自己的职业发展做出更加明智的决策。此外，平台还会根据用户的职业兴趣和经验推荐相关的职业机会和招聘信息。
                        </p>
                    </div>
                </div>
                <div class="question-box">
                    <div class="box-header" >如何参加平台提供的职业培训课程？<div class="arr"></div></div>
                    <div class="box-content">
                        <p style="margin: 0px;">i 职推 平台提供了多种职业培训课程，用户可以根据自己的需要
                            选择适合的课程进行学习。用户可以在平台上浏览课程目录和课程介绍，选择自己感兴趣和需要的课程。一旦选择了课程，用户可以在线学习，并在平台上与其他学员交流和互动，分享学习心得和职业经验。平台还会根据用户的学习进度和表现，提供相应的学习支持和指导，帮助用户更好地掌握职业技能和知识。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="contact animate__animated animate__slideInLeft">
        <div class="w">
           
                <div class="contact_box">  <div class="contact_left">职途<br> ——<span style="font-size:20px;"> 面向职教的一站式就业匹配与职能提升平台<span/><br></div><button
                class="btn7" onclick="window.location='https://github.com/kangvcar/JobFlowAI'">生成职业画像</button><button class="btn8"  onclick="window.location='https://github.com/kangvcar/JobFlowAI'">联系我们</button></div>
              
            </div>
       
    </div>

    <div class="footer animate__animated animate__slideInRight">
        <div class="footer_title">
            <span>职途</span>
        </div>
        <div class="footer_link link_font"><a href="">Home</a><a href="">创始团队</a><a href="">联系我们</a><a href="">博客文章</a><a
                href="">项目发展</a></div>
                <div class="footer_link link_image"><a href="https://facebook.com/"></a>    <a href="https://twitter.com/"></a><a href="https://youtube.com/"></a></div>
        <div class="footer_time">© Copyright 2024, 职途. All Rights Reserved.</div>
    </div>

    <script >
        const boxes = document.querySelectorAll('.question-box');
    
        boxes.forEach((box, index) => {
            const header = box.querySelector('.box-header');
            const arr = header.querySelector('.arr');
            const content = box.querySelector('.box-content');    
            let isExpanded = false;
            arr.innerHTML='';
            header.addEventListener('click', () => {
                if (!isExpanded) {   
                    // 展开当前盒子 
                    const height = content.scrollHeight;
                    box.style.height = height+70 +'px';
                    /*content.style.height = height + 'px';*/
                    isExpanded = true;
                    arr.innerHTML=''
                    // 关闭其他盒子
                    for (let i = 0; i < boxes.length; i++) {
                        if (i !== index && boxes[i].querySelector('.box-content').style.height !== '0px') {
                            boxes[i].style.height = '60px'; // 设置初始高度
                            boxes[i].querySelector('.box-content').style.height = 60;
                            boxes[i].querySelector('.box-header').querySelector('.arr').innerHTML=''
                            /*arr.innerHTML='';
                         ;*/
                        }
                       
                    }
                } else {
                    // 收起当前盒子
                    box.style.height = '60px'; // 设置初始高度
                    content.style.height = 60; // 初始高度为 0
                    isExpanded = false;
                    arr.innerHTML='';
                  
                }   
            });
        });</script>

    <script>// 获取元素gm
        const imageContainer = document.querySelector('#image-container');
        const images = imageContainer.querySelectorAll('img');
        let currentIndex = 0;

        function showImage(index) {
            images[currentIndex].style.opacity = 0; // 先将当前图片淡出
            setTimeout(() => {
                images[index].style.opacity = 1; // 过渡时间后再将新的图片淡入
                currentIndex = index;
            }, 500); // 这里的延迟时间需要和 CSS 中的过渡时间一致（单位为毫秒）
        }

        document.querySelector('#prev-button').addEventListener('click', () => {
            const index = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
            showImage(index);
        });

        document.querySelector('#next-button').addEventListener('click', () => {
            const index = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
            showImage(index);
        });



    </script>
</body>

</html>





